<template>
	<view class="content">
		<view class="">
			<view class="swiper-list">
				<u-swiper :list="list1"></u-swiper>
				<view class="content-search">
					<view class="" >
						<u--input 
							@focus="change"
						    placeholder="你想住在哪儿?"
						    prefixIcon="search"
						    prefixIconStyle="font-size: 22px;color: #909399" 
							suffixIconStyle="color: #909399" 
						></u--input>
					</view>
					<view class="icon">
						<view class="">
							<u-icon name="map-fill" @click="tomap"></u-icon> 
						</view> 
						<navigator url="../citys/citys">
							<view class="city" @changecity="tochangecity(item)">{{city}}</view>
						</navigator> 
					</view>
				</view> 
			</view>
			
			<!-- <view class="content-search">
				<view class="" >
					<u--input 
						@focus="change"
					    placeholder="你想住在哪儿?"
					    prefixIcon="search"
					    prefixIconStyle="font-size: 22px;color: #909399" 
						suffixIconStyle="color: #909399" 
					></u--input>
				</view>
				<view class="icon">
					<view class="">
						<u-icon name="map-fill" @click="tomap"></u-icon> 
					</view> 
					<navigator url="../citys/citys">
						<view class="city" @changecity="tochangecity(item)">{{city}}</view>
					</navigator> 
				</view>
			</view> -->
			
		</view>
	
		<!-- <view class="content-search"> 
			<view class="" >
				<u--input 
					@focus="change"
				    placeholder="你想住在哪儿?"
				    prefixIcon="search"
				    prefixIconStyle="font-size: 22px;color: #909399" 
					suffixIconStyle="color: #909399" 
				></u--input>
			</view>
			<view class="icon">
				<view class="">
					<u-icon name="map-fill" @click="tomap"></u-icon> 
				</view> 
				<navigator url="../citys/citys">
					<view class="city" @changecity="tochangecity(item)">{{city}}</view>
				</navigator> 
			</view>
		</view> -->
		<view class="content-main">
			<u-grid :border="false" @click="click">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<img :src="baseListItem.url" alt="" srcset="" class="grid-img">
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<view class="content-text">
			<text class="text-title">帮我找房</text>
			<view class="text-serve">
				<view>全城经纪人为您服务</view>
				<view>极速响应/专家推荐</view>
			</view>
		</view>
		<view class="content-new" >
			<view class="news">新房·本周热门好盘</view> 
			<view class="new-house" v-for="item in newhouse" :key="item.id" > 
					<view class="house-img">
						<img :src="item.imgs" alt="" srcset="" class="news-img">
						<view class="news-area">{{item.area}}</view>
					</view> 
					<view class="house-text">
						<view class="news-name">{{item.name}}</view>
						<view class="news-point">{{item.point}}m²</view>
						<view class="news-price">{{item.price}}元/m²</view> 
					</view> 
			</view> 
		</view>
		<view class="content-like">
			<view class="likes">猜你喜欢</view>
			<likes class="new-likes" v-for="item in houselist" :key="item.id" :obj="item" @click="clickto"/> 
		</view>
	</view>
</template>

<script>
	import likes from "@/components/likes/likes.vue"
	import { $_toplist,$_gethouse} from "@/apis/index.js" 
	export default {
		components:{
			likes
		},
		data() {
			return { 
				baseList: [{
						url: '../../static/imges/d5592269bafbe134453afb01c5612658.png',
						title: '二手房'
					},
					{
						url: '../../static/imges/44b50fa3627b67a9102c82f96ebd9189.png',
						title: '新房'
					},
					{
						url: '../../static/imges/94250adc5e77f9b816f77032e27a8412.png',
						title: '租房'
					},
					{
						url: '../../static/imges/9584c1c41f2cdcf18ed011eab5c87a04.png',
						title: '装修'
					},
					{
						url: '../../static/imges/78080e8593bfc4ef81edb498e87c7216.png',
						title: '家居商城'
					},
					{
						url: '../../static/imges/d5592269bafbe134453afb01c5612658.png',
						title: '卖房'
					},
					{
						url: '../../static/imges/44b50fa3627b67a9102c82f96ebd9189.png',
						title: '家庭服务'
					},
					{
						url: '../../static/imges/94250adc5e77f9b816f77032e27a8412.png',
						title: '商铺办公'
					},
					{
						url: '../../static/imges/9584c1c41f2cdcf18ed011eab5c87a04.png',
						title: '买卖流程'
					},
					{
						url: '../../static/imges/78080e8593bfc4ef81edb498e87c7216.png',
						title: '维修'
					},
					{
						url: '../../static/imges/d5592269bafbe134453afb01c5612658.png',
						title: '好赞好房'
					},
					{
						url: '../../static/imges/78080e8593bfc4ef81edb498e87c7216.png',
						title: '社区生活'
					},
					{
						url: '../../static/imges/9584c1c41f2cdcf18ed011eab5c87a04.png',
						title: '找经纪人'
					},
				],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				city:"请选择城市",
				// city: "成都市" 
				// country: "中国"
				// district: "青羊区" 
				// province: "四川省"			
				// township: "草市街街道"
				newhouse:{},
				houselist:{},
				page:1, //当前页
				overFlag:false
			}
		},
		onLoad(option) {
			let _this=this
			uni.getLocation({ 
				success(res) {
					// console.log(res);
					uni.request({
						url:"https://restapi.amap.com/v3/geocode/regeo",
						data:{
							key:"12828d64a0ec3010aa55e16b158cd20c",
							location:res.longitude+","+res.latitude 
						},
						success(res){
							_this.city=res.data.regeocode.addressComponent.city
							// console.log(104,res.data.regeocode.addressComponent.city)
						}
					}) 
				}
			}),
			$_toplist().then(res=>{
				// console.log(135,res.data.data);
				// area: "金牛区"
				// id: 1
				// imgs: "http://129.211.169.131:6368/imgs/a.jpg"
				// name: "北京城建国誉府"
				// point: "160-204"
				// price: "31600"
				_this.newhouse=res.data.data
			}),
			$_gethouse({page:_this.page,pagesize:5}).then(res=>{
				if(res.data.code==1){ 
					 _this.houselist=res.data.data 
				}
			}),
			console.log(169,option);
			// this.city=option
		},
		onReachBottom() { 
			let _this=this
			if(this.overFlag) return
			$_gethouse({page:++_this.page,pagesize:5}).then(res=>{
				if(res.data.code==1){ 
					_this.houselist.push(...res.data.data)
					if(res.data.data.length==0){
						this.overFlag=true 
						alert("已经到底了") 
					} 
				}
			})
		},
		methods:{
			tochangecity(item){
				this.city=item
			},
			change(){
				uni.navigateTo({
					url:"/pages/serach/serach"
				})
			},
			tomap(){
				uni.navigateTo({
					url:"/pages/map/map"
				})
			}
		}
	}
</script>

<style> 
.content{
	/* position: relative; */
}
	.swiper-list{
		position: relative; 
	}
	.u-swiper{
		
	}
	.content-search {
		position: absolute;
		background-color: #ffece5; 
		border-radius: 5px;
		height: 30px;
		top: 5%;
		right: 5%;
		left: 5%;
		bottom: 0px;
		margin: 0px 0px;
		display: flex;
		align-items: center; 
		justify-content: space-around;
	}
	
	
	.u--input {
		/* padding-left: 100rpx; */
		
		position: absolute;
		top: 0px;
		right: 0px;
		left: 0px;
	}
	.city{
		/* margin-right: 20rpx; */
	}
	.u-grid-item{
		width: 20% !important;
	}
	.grid-img{
		margin-top:20px;
		width: 90rpx;
		height: 60rpx;
	}
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.content-main{
		margin: 0px 10px;
	}
	.content-text{
		margin: 5px 20px; 
	}
	.text-title{ 
		font-size: 18px ;
		font-weight: bold;
	}
	.text-serve{
		margin-top: 10px;
		padding: 10px; 
		height: 150rpx;
		border: 1px solid #eee; 
	}
	.content-new{
		margin:20px;
	}
	.news{
		font-weight: bold;
		margin: 10px 0px ;
	}
	.new-house{
		display: inline-flex;
		flex-direction: column; 
	}
	.house-img{
		display: flex; 
		justify-content: space-evenly;
	}
	.news-area{
		position: absolute;
		background-color: aliceblue; 
	}
	.news-img{
		width: 200rpx;
		height: 150rpx;
	}
	.news-name{
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0px;
	}
	.news-point{
		font-size: 10px;
	}
	.news-price{
		font-size: 12px;
		color: red;
	}
	.new-likes{
		display: flex;
		/* justify-content: space-around; */
		/* flex: 1; */
	}
	.likes{
		font-weight: bold;
		margin: 20px;
	}
	.icon{
		display: flex;
		flex-direction:row;
		align-items: center;
		margin-right: 5px;
	}
</style>
